<script setup>
import { tabProps } from "vant";
import { ref } from "vue";

const select = ref(0);

// const footerList = ref([
//     { title: '首页', icon: 'icon-shouyeshouye', path: '/home'},
//     { title: '分类', icon: 'icon-fenlei', path: '/category' },
//     { title: '购物车', icon: 'icon-cart', path: '/cart' },
//     { title: '我的', icon: 'icon-wode', path: '/mine' },
// ])

const footerList = ref([
  {
    title: "首页",
    active: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/shouye.png",
    inactive: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/shouyeinactive.png",
    path: "/home",
    badge: "2",
  },
  {
    title: "分类",
    active: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/fenlei.png",
    inactive: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/fenleiinactive.png",
    path: "/category",
    badge: "4",
  },
  {
    title: "购物车",
    active: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/gouwuche.png",
    inactive:
      "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/gouwucheinactive.png",
    path: "/cart",
    badge: "6",
  },
  {
    title: "我的",
    active: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/mine.png",
    inactive: "https://cdn-gdcws-imgs.gdcws.cn/tab/20240118/mineinactive.png",
    path: "/mine",
    badge: "8",
  },
]);

const onChange = (index) => {
  select.value = index;
};
</script>

<template>
  <!-- route="true" 监听路由发生改变 -->
  <!-- <van-tabbar v-model="select" @change="onChange(select)"> -->
  <!-- <van-tabbar v-model="select" @change="onChange(select)" :route="true"> -->
  <van-tabbar v-model="select" @change="onChange(select)">
    <van-tabbar-item
      v-for="(item, i) in footerList"
      :key="i"
      replace
      :to="item.path"
      :badge="item.badge"
    >
      {{ item.title }}
      <template #icon>
        <img :src="select === i ? item.inactive : item.active" />
      </template>
    </van-tabbar-item>
  </van-tabbar>

  <!-- <div class="footer footer-list">
        <ul>
            <li v-for="(item, i) in footerList" :key="i" >
                <router-link :to="item.path">
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </router-link>
            </li>
        </ul>
    </div> -->
</template>

<style lang="scss" scoped>
// .footer-list {
//     width: 100%;
//     bottom: 0;
//     left: 0;
//     height: 10%;
//     position: fixed;

//     ul {
//         display: flex;
//         height: 100%;
//     }
//     li {
//         flex: 1;
//         align-items: center;
//         display: flex;
//         height: 100%;
//         flex-direction: column;
//         display: flex;
//         i, span {
//             display: block;
//         }
//     }
// }

.footer {
  position: fixed; //固定定位
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background-color: #fff;
  border-top: 1px solid rgb(193, 188, 188);
}
.footer-list {
  min-width: 320px;
  height: 49;
  margin: 0 auto;
  padding-top: 8px;
}
.footer ul {
  display: flex;
  align-items: center;
  height: 100%;
  text-align: center;
}

.footer ul li {
  flex: 1; //平分剩余空间
}
.footer ul li span {
  display: block;
}

.footer li i {
  font-size: 2rem;
}
</style>
